<template>
	<!-- 电池列表 -->
	<div class="content" v-if="is_contract == 0">
		<div class="content-top">
			潜客管理_我的电子合同列表
		</div>
		<div class="content-search">
			<el-form :inline="true" class="demo-form-inline" :model="form" style="margin-top: 20px;">
				<el-form-item label="合同编号：">
					<el-input placeholder="请输入合同编号" v-model="form.code"></el-input>
				</el-form-item>
                <el-form-item label="潜客名称：">
					<el-input placeholder="请输入潜客名称" v-model="form.name"></el-input>
				</el-form-item>
				<el-form-item label="状态：">
					<el-select v-model="form.state" placeholder="请选择">
						<el-option
							v-for="item in stateList"
							:key="item.id"
							:label="item.name"
							:value="item.id">
							</el-option>
					</el-select>
				</el-form-item>
				<el-button type="primary" @click="onSearch" icon="el-icon-search">搜索</el-button>
				<!-- </el-form-item> -->
			</el-form>
		</div>
		<div class="content-operation">
			<el-button type="primary" @click="onAdd" icon="el-icon-plus">添加合同</el-button>
		</div>
		<div class="content-table">
			<el-table :data="contractList" show-header stripe style="width: 100%;">
				<el-table-column align="center" prop="contractCode" label="合同编码"></el-table-column>
				<el-table-column align="center" prop="passengerName" label="潜客名称"></el-table-column>
				<el-table-column align="center" prop="vehicleTotalPrice" label="车辆总价"></el-table-column>
				<el-table-column align="center" prop="vehicleActualTotalPrice" label="实际购车总价"></el-table-column>
				<el-table-column align="center" prop="contractVerificationStatus" label="状态"></el-table-column>
				<el-table-column align="center" prop="createDate" label="创建时间"></el-table-column>
				<el-table-column align="center" prop="sysUserChineseName" label="业务员姓名"></el-table-column>
				<el-table-column label="操作" fixed="right" align="center" width="200">
					<template slot-scope="scope">
						<el-button @click="hanleDetail(scope.row)" type="text" size="small"><i class="el-icon-view"></i>详情</el-button>
						<el-button @click="handleClick(scope.row)" type="text" size="small"><i class="el-icon-edit"></i>编辑</el-button>
						<el-button @click="deleteContract(scope.row)" type="text" size="small"><i class="el-icon-delete"></i>删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<div class="content-page">
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="page"
			 :page-size=limit layout="prev, pager, next, jumper" :total=total>
			</el-pagination>
		</div>
        
	</div>
	<CrmPurchaseContractDetail v-else-if="is_contract == 1" @contractDetail="contractDetail" :id="id"></CrmPurchaseContractDetail>
	<CrmContractAdd v-else-if="is_contract == 2" @contractDetail="contractDetail"></CrmContractAdd>
	<CrmContractEdit v-else @contractDetail="contractDetail" :id="id"></CrmContractEdit>
</template>

<script>
import CrmContractAdd from '@/components/crmpurchasecontract/CrmContractAdd.vue'
import CrmContractEdit from '@/components/crmpurchasecontract/CrmContractEdit.vue'
import CrmPurchaseContractDetail from '@/components/crmpurchasecontract/CrmPurchaseContractDetail'
import Global from '@/components/Global.vue'
	export default {
		components: {
			CrmContractAdd: CrmContractAdd,
			CrmPurchaseContractDetail: CrmPurchaseContractDetail,
			CrmContractEdit: CrmContractEdit
		},
		props:['power'],
		data() {
			return {
                form:{
                    name:'',
                    code:'',
                    state:''
                },
                page:1,
                limit:10,
                total:1,
				is_add:false,
				contractList:[],
				is_detail:false,
				is_contract:0,
				id:'',
			    stateList:[
					{
						id:'',
						name:'请选择状态'
					},
					{
						id:0,
						name:'待提交'
					},
					{
						id:1,
						name:'审核中'
					},
					{
						id:50,
						name:'审批通过'
					},
					{
						id:99,
						name:'驳回'
					},
				],
				userId:localStorage.getItem('id')
			}
		},
		mounted() {
			this.getContract()
		},
		methods: {
			/* 删除 */
			deleteContract(row){
				if(row.processStatus != 0){
					this.$popup.open('删除失败，只有待提交的合同可以删除')
					return;
				}
				var self = this;
				this.$confirm('此操作将删除该合同, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					$.ajax({
						url: Global.serverIp + 'crm/crmpurchasecontract/delete',
						data: row.id,
						xhrFields: {
							withCredentials: true
						},
						beforeSend : function(request) {
							request.setRequestHeader("Authorization", 'Bearer '+localStorage.getItem('token'));
						},
						contentType: 'application/json;charset=utf-8',
						dataType: 'json',
						type: 'delete',
						success: function(res) {
							if (res.code == Global.success_code) {
								console.log(res);
								self.$popup.open("删除成功");
								self.getContract()
							} else {
								self.$popup.open(res.msg);
							}
						},
						error: function(res) {
							if(res.responseJSON.code == '040005'){
								self.$popup.open("登录过期");
							}else{
								self.$popup.open("请求失败");
							}
						}
					})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			contractDetail(type){
				if(type == 2){
                   this.getContract()
				}
				this.is_contract = 0
			},
			getContract(){
				var self = this
                this.$axios.post(this.$global.serverIp + 'crm/crmpurchasecontract/findSysUserIdAllOrPage' , {
                    "limit":self.limit,
					"page":self.page,
					"paginationFlag":true,
					"contractType":0,
					"contractCode":self.form.code,
					"passengerName":self.form.name,
					"contractVerification":self.form.state
                }).then(res =>{
                      if(res != ''){
					
						  self.contractList = res.data.list
						  self.total = res.data.totalCount
					  }
				})
			},
			onSearch(){
				this.page = 1
				this.getContract()
			},
			hanleDetail(row){
				this.id = row.id
				this.is_contract = 1
			},
			handleClick(row){
				if(row.processStatus == 0 || row.processStatus == 99){
                    this.id = row.id
					this.is_contract = 3
				}else{
					this.$popup.open('只有待提交和驳回的状态下才能编辑')
					return;
				}
				if(row.sysUserId != this.userId){
					this.$popup.open('不支持编辑他人的合同')
					return;
				}
			},
            handleCurrentChange(val){
				this.page = val;
				this.getContract()
			},
			handleSizeChange(){},
			onAdd(){
				 this.is_contract = 2
			},
			
		},

	}
	import '@/assets/css/common.css'
</script>
<style>
   .el-checkbox-group{
	   margin-left: 0 !important;
   }
</style>
